<div class="row container">
    <form class="group column" [formGroup]="form" (ngSubmit)="resetPassword()" *ngIf="!passwordResetEmailSent">
        <h5 class="element">Forgot your password?</h5>
        <p class="ig-typography__body-1 element">Enter your email address bellow and we'll send you instructions to reset your password.</p>
        <igx-input-group type="border" class="user-input">
            <igx-suffix>
                <igx-icon family="material" class="icon">email</igx-icon>
            </igx-suffix>
            <input type="text" igxInput formControlName="email" />
            <label igxLabel>Email</label>
            <igx-hint *ngIf="fieldHasError('email', 'required')">Please enter your email.</igx-hint>
            <igx-hint *ngIf="fieldHasError('email', 'email')">Please enter a valid email address.</igx-hint>
        </igx-input-group>
        <span class="error" *ngIf="serverErrorMessage">{{serverErrorMessage}}</span>
        <button igxButton="raised" igxRipple class="user-input">Send A Reset Password Link</button>
        <a class="ig-typography__body-2 hyperlink" routerLink="/account/login">Back to Sign In</a>
    </form>

    <div class="group column" *ngIf="passwordResetEmailSent">
        <h4>Forgot Password</h4>
        <h5 class="element">Check your email.</h5>
        <p class="ig-typography__body-1 element">Check your email and follow the instructions to reset your password.
        </p>
        <div class="row">
            <p class="ig-typography__body-2 text">Didn't get the email?</p>
            <a (click)="forgotPassword()">Forgot Password</a>
        </div>
    </div>
</div>